<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{this.title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="onAdd" v-if="isShow(135)">新 增</el-button>
        <!-- <el-button type="primary" class="myBgGreen">批量删除</el-button>
        <el-button type="primary" class="myBgGreen">导 出</el-button> -->
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px" :gutter="10">
      <el-col :span="4">
        <template>
          <el-select 
            v-model="userTypeScope"
            clearable
            placeholder="全部范围">
            <el-option
              v-for="item in Object.keys(publishUserTypeScope)"
              :key="publishUserTypeScope[item]"
              :label="publishUserTypeScope[item]"
              :value="item">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="4">
        <template>
          <el-select 
            v-model="noticeType"
            clearable
            placeholder="全部类型">
            <el-option
              v-for="item in Object.keys(noticeTypeList)"
              :key="noticeTypeList[item]"
              :label="noticeTypeList[item]"
              :value="item">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="4">
        <el-date-picker
          v-model="time"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="全部时段">
        </el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="请输入关键词" v-model="kw"></el-input>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" class="myBgGreen" @click="onSearch">查 询</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px">
      <el-col :span="24">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          :border = true
          :stripe = true
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="100">
          </el-table-column>
          <el-table-column
            label="标题"
            >
            <template scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.title" placement="bottom">
                <span class="myTabTitle">{{scope.row.title}}</span>
              </el-tooltip>
            </template>
          </el-table-column> 
          <el-table-column
            label="摘要"
            >
            <template scope="scope">
              <el-tooltip class="item" effect="dark" :content="scope.row.digest" placement="bottom">
                <span class="myTabdigest">{{scope.row.digest}}</span>
              </el-tooltip>
            </template>
          </el-table-column> 
          <el-table-column
          	prop="create_time"
            label="创建时间"
            width="150"
            >
          </el-table-column>
          <el-table-column
          	prop="send_time"
            label="发布时间"
            width="150"
            >
          </el-table-column>
          <el-table-column
          	prop="publisher"
            label="创建人"
            width="150"
            >
          </el-table-column>
          <el-table-column
          	prop="publish_name"
            label="发布者标签"
            width="150"
            >
          </el-table-column>
          <el-table-column
            prop="to_user_type"
            label="发布范围"
            width="100"
            >
             <template scope="scope">
              <span>{{scope.row.to_user_type | userTypeScope}}</span>
            </template>
          </el-table-column>
          <el-table-column
          	prop="type"
            label="类型标签"
            width="100"
            >
            <template scope="scope">
              <span>{{scope.row.type | noticeType}}</span>
            </template>
          </el-table-column>
          <el-table-column
          	prop="status"
            label="状态"
            width="100"
            >
             <template scope="scope">
              <span>{{scope.row.status | statusType}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150">
            <template scope="scope">
              <el-button type="text" @click="getDetail(scope.row.article_id)" class="look" size="small">详情</el-button> 	
              | <el-button type="text primary" @click="modify(scope.row.article_id)" class="look" size="small" v-if="isShow(136)">编辑</el-button> 
              | <el-button type="text warning" @click="onDelete(scope.row.article_id)" class="look" size="small" v-if="isShow(137)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="block">                    
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page_num"
            :page-sizes="[10, 15]"
            :page-size="page_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myColorRed{
    color: #f00;
  }
  .myTabTitle,.myTabdigest{
    display: -webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
</style>

<script>
   import { getArticleList, publishUserTypeScope, noticeTypeList , deleteNews} from "@/api/contentMGT";
  export default {
    data(){
      return{  
        title:"通知公告管理",  
        loading:false,  
        tableData:[],  
        total:null, //总条数  
        page_num: null, //当前页码
        page_size: null, //每页显示多少条 
        kw:"",
        time:"",

        userTypeScope: "",
        publishUserTypeScope: publishUserTypeScope,
        noticeType: "",
        noticeTypeList: noticeTypeList
      }
    },
    created() {
      document.title=this.title;
      this.onGetNewsList();
    },
    filters: {
      userTypeScope(value) {
        return publishUserTypeScope[value[0]];
      },
      noticeType(value) {
        if (value == 2) {
          return '通知';
        } else if (value == 3) {
          return '公告';
        }
      },
      statusType(value) {
        if (value == 1) {
          return "启用";
        } else {
          return "停用";
        }
      }
    },
    methods:{
      onGetNewsList(){
        let vm=this;
        let params={
          is_fuzzy:true,
          kw:vm.kw,
          type_list: "2,3", // 获取新闻
          page_num:vm.page_num,
          page_size:vm.page_size
        }
        vm.loading=true;
        //console.log(params)
        getArticleList(params).then(response => {
          let res=response.data;
          // console.log(res)  

          vm.tableData = res.rows;
          vm.page_size = res.page_size;
          vm.page_num = res.page_num;
          vm.total = res.total;
          vm.loading=false;
        }).catch(error => {
          vm.loading=false;
        })	
      },	
      onSearch() {//查询
        this.onGetNewsList();
      },
      handleSizeChange(val) {
        this.page_size = val;
        this.onGetNewsList();
      },
      handleCurrentChange(val) {
        let pageNum=window.localStorage.getItem("pageNum");
        if(pageNum){
          this.page_num = Number(pageNum);
          window.localStorage.removeItem("pageNum");
        }else{
          this.page_num = val;
        }
        this.onGetNewsList();
      },
      handleSelectionChange(val) {
      },
      onAdd(){//新增
        this.$router.push({
          path:"/noticeComponents",
          query: {type: 'add', pageNum: this.page_num}
        })
      },
      getDetail(id) {
        this.$router.push({
          path:"/noticeComponents",
          query: {type: 'info',id:id, pageNum: this.page_num}
        })
      },
      modify(id){//编辑
        this.$router.push({
          path:"/noticeComponents",
          query: {type: 'update',id:id, pageNum: this.page_num}
        })
      },
      onDelete(id){
        let vm=this;
        vm.$confirm('您确定要删除这条数据吗？', '提示', {//弹出框
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteNews(id).then(response => {
            let res=response.data;
            vm.$message.success("执行成功！");
            vm.onGetNewsList();
            // console.log("yes",res)
          }).catch(error => {
            vm.$message.error("执行失败！");
            // console.log("no",error)
          })
        }).catch(() => {
          vm.$message({
            type: 'info',
            message: '已取消执行'
          });          
        });

      }
    }

  }


</script>



